<template>
  <div class="main">
    <div class="nav-bar" v-if="$route.meta.nav">
      <Nav :title="($route.meta.title as string)" />
    </div>
    <div class="container">
    <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Nav from './components/nav/index.vue';
</script>

<style>
html,
body,
#app {
  height: 100%;
}
</style>

<style lang="scss" scoped>
.main {
  height: 100%;
  display: flex;
  flex-direction: column;

  .nav-bar {
    &:deep(.van-hairline--bottom:after) {
      border-bottom-width: 0px;
    }
  }

  .container {
    flex: 1;
    height: 0;
    overflow-y: scroll;
  }
}
</style>
